﻿@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row" data-ng-app="myapp" data-ng-controller="HomeController" id="HomeIndex">
 <div class="row" ><div class="col-mod-6"> Raw Json: {{new.Product|json}}</div></div>
<div class="row">
   

    <div class="col-md-10">
        <table class="table">
            <tr>
                <th>Name</th>
                <th>Quantity</th>
                <th>Description</th>
                <th>Price</th>
                <th>Action</th>
            </tr>
            <tr data-ng-repeat="item in model">
                <td><span data-ng-if="showSpan">{{item.Name}} </span><span data-ng-if="!showSpan"><input type="text" class="form-control"  data-ng-model="item.Name"/></span> </td>
                <td><span data-ng-if="showSpan">{{item.Quantity}}</span> <span data-ng-if="!showSpan"><input type="text" class="form-control"  data-ng-model="item.Quantity" /></span></td>
                <td><span data-ng-if="showSpan">{{item.Description}} </span> <span data-ng-if="!showSpan"><input type="text"  class="form-control"  data-ng-model="item.Description" /></span></td>
                <td><span data-ng-if="showSpan">{{item.Price}} </span><span data-ng-if="!showSpan"><input type="text"  class="form-control"  data-ng-model="item.Price" /></span></td>
                <td>  <button data-ng-if="showSpan" type="button"  class="btn btn-success" data-ng-click="showEditableField(false)">Edit</button>
                    <button data-ng-if="!showSpan" type="button"  class="btn btn-success" data-ng-click="UpdateProduct(item)">Edit</button>
                    <button data-ng-if="!showSpan" type="button"  class="btn btn-success" data-ng-click="showEditableField(true)">Cancel</button>
                    <button data-ng-if="showSpan" type="button"  class="btn btn-dander" data-ng-click="DeleteProduct(item.ID)">Delete</button>   </td>
            </tr>
            <tr data-ng-if="model.length==0">
                <td colspan="5">There is no item to display</td>
            </tr>
            <tr data-ng-if="showAddButton">
                <td>
                    <input type="text" class="form-control" placeholder="Name" data-ng-model="new.Product.Name"/></td>
                <td>
                    <input type="text" class="form-control" placeholder="Quantity" data-ng-model="new.Product.Quantity" /></td>
                <td>
                    <input type="text"  class="form-control" placeholder="Description" data-ng-model="new.Product.Description" />
                </td>
                <td>
                    <input type="text"  class="form-control" placeholder="Price" data-ng-model="new.Product.Price" />
                </td>
                <td>                   
                    <button type="button"  class="btn btn-primary" data-ng-click="SaveProduct()">Add</button>
                    <button type="button"  class="btn btn-default" data-ng-click="showHideButton(false)">Cancel</button>                        
                </td>
            </tr>
        </table>
        <button  type="button" class="btn btn-primary" data-ng-click="showHideButton(true)">Add Product</button>

    </div>
    
</div>

</div>
@section scripts{
    <script src="~/App/app.js"></script>
}

@*@section jsCode{
    angular.bootstrap(document,['myapp']);
    }*@





